<template>
  <div class="container">
    <!-- <div class="test">
      <div v-for="item in 10" :style="{ width: item == 1 ? '100%' : '' }">
        {{ item }}
      </div>
    </div> -->
    <div class="flex">
      <div>类型：</div>
      <el-radio-group v-model="left_name_type" @change="change_name_type">
        <el-radio :label="1">单步表单</el-radio>
        <el-radio :label="2">多步表单</el-radio>
      </el-radio-group>
    </div>
    <div class="flex">
      <div style="flex-shrink: 0">名称：</div>
      <div v-if="left_name_type == 1">{{ show_left_name_list[0]?.name }}</div>
      <div v-else class="flex" style="flex-wrap: wrap">
        <div v-for="(item, index) in show_left_name_list" :key="item.id">
          {{ item.name }}
          <span v-if="index != show_left_name_list.length - 1">--></span>
        </div>
        <el-button
          v-if="show_left_name_list.length"
          type="primary"
          class="m_left10"
          size="small"
          @click="show_add_box = true"
          >编辑</el-button
        >
      </div>
    </div>
  </div>
  <el-drawer
    v-model="show_add_box"
    direction="rtl"
    size="50%"
    :close-on-click-modal="false"
    destroy-on-close
  >
    <tempalte #default>
      <div>
        <div>步骤名称：</div>
        <div class="flex m_top10">
          <div v-for="(item, index) in left_name_list" class="flex">
            <el-input
              v-model="item.name"
              placeholder="请输入"
              style="width: 100px"
            ></el-input>
            <span v-if="index != left_name_list.length - 1" class="m_0_5">=></span>
          </div>
          <el-button
            class="m_left10"
            type="primary"
            @click="
              left_name_list.push({
                name: '',
                id: left_name_list[0].id,
              })
            "
          >
            增加一步</el-button
          >
          <el-button
            v-if="left_name_list.length > 1"
            class="m_left10"
            @click="left_name_list.splice(-1)"
          >
            删除一步</el-button
          >
        </div>
        <div class="tr m_top10">
          <el-button
            @click="
              show_left_name_list.length == 0 ? (left_name_type = 1) : '',
                (show_add_box = false)
            "
            >取消</el-button
          >
          <el-button type="primary" @click="submit_left_names">确定</el-button>
        </div>
      </div>
    </tempalte>
  </el-drawer>
</template>

<script lang="ts" setup>
import { ElMessage, ElMessageBox } from "element-plus";
import { ref, toRefs } from "vue";
import EventBus from "@/utils/EventBus";
import { useStore } from "vuex";
const store = useStore();
const props = defineProps({
  form_list: {
    type: Array,
    default: [],
  },
});
const { form_list } = toRefs(props);
EventBus.on("change_form_index_name", (e: any) => {
  show_left_name_list.value[e.index].name = e.name;
});
const show_add_box = ref(false);
const left_name_type = ref(form_list.value.length > 1 ? 2 : 1);
const left_name_list = ref([]);
const show_left_name_list = ref([]);
show_left_name_list.value = JSON.parse(JSON.stringify(form_list.value));
const change_name_type = (e) => {
  if (e == 2) {
    show_add_box.value = true;
    left_name_list.value = JSON.parse(JSON.stringify(show_left_name_list.value));
  } else {
    ElMessageBox.confirm(
      "切换表单类型将清空原有表单以及条件权限相关配置，确定切换吗？",
      "提示",
      {
        cancelButtonText: "取消",
        confirmButtonText: "确定",
        closeOnClickModal: false,
        type: "warning",
      }
    )
      .then(() => {
        show_left_name_list.value = [{ name: "表单名1" }];
        EventBus.emit("change_form_name", show_left_name_list.value);

        store.commit("clear_customForm_role_list");
        store.commit("clear_condition_setup_list");
      })
      .catch(() => {
        left_name_type.value = 2;
      });
  }
};
const submit_left_names = () => {
  let has_empty_name = left_name_list.value.some((item) => {
    return item.name == "";
  });
  if (has_empty_name) {
    ElMessage.error("请完善所有空白的步骤名称！");
    return;
  }
  ElMessageBox.confirm(
    "切换类型将清空原有表单以及条件权限相关配置，确定切换吗？",
    "提示",
    {
      cancelButtonText: "取消",
      confirmButtonText: "确定",
      closeOnClickModal: false,
      type: "warning",
    }
  )
    .then(() => {
      show_add_box.value = false;
      show_left_name_list.value = JSON.parse(JSON.stringify(left_name_list.value));
      EventBus.emit("change_form_name", show_left_name_list.value);

      store.commit("clear_customForm_role_list");
      store.commit("clear_condition_setup_list");
    })
    .catch(() => {
      left_name_type.value = 2;
    });
};
</script>

<style lang="scss" scoped>
.test {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  > div {
    width: 50px;
    height: 50px;
    border: 1px solid #ccc;
    box-sizing: border-box;
  }
}
</style>
